<template>
  <div class="app-container">
    <el-form v-model="demo" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="name" label="课程名称">
            <el-input v-model="demo.name" name="title" placeholder="请输入课程名称" :disabled= 'true'></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span = "8">
          <el-form-item prop="value" label="所属课时">
            <el-select v-model="demo.lessonCount" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
        <el-form-item label="文件上传">
          <el-upload
              class="upload-demo"
              action= ""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              multiple
              :limit="100"
              :http-request="handlePost"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
              <span><img src="http://qiniu.zhonglongedu.com/1539238021539" v-show="imgShow" style="width: 50px;height: 50px;width: 50px;height: 50px;position: absolute;top: -5px;left: 94px;"></span>
            </el-upload>
        </el-form-item>
      </el-form>
       <el-button type="primary" @click="sureImport" :disabled = "buttonShow" style="margin-top: 8px;margin-left: 20px;">确定</el-button>
        <el-button type="primary" @click="Rest" :disabled = "buttonShow" style="margin-top: 8px;margin-left: 20px;"></i>添加下一个</el-button>
  </div>
</template>

<script>
import { fetchList } from "@/api/article";
import axios from "axios";
import api from "@/api/upload";
import { Message } from "element-ui";
export default {
  name: "InlineEditTable",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      demo: {
        name: "",
        lessonCount: "",
        value: "",
        keyValue: "",
        code: ""
      },
      buttonShow: false,
      imgShow: false,
      imgUrl: "../../../assets/timg.gif",
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      fileData: [],
      options: [],
      attachments: [],
      fileList: []
    };
  },
  created() {},
  mounted() {
    let lesson = "lesson_period";
    api.dictionary(lesson).then(response => {
      console.log(response);
      response.map((item, index) => {
        this.options.push({
          label: item.label,
          value: item.code
        });
      });
    });
    this.demo.name = this.$route.query.name;
  },
  methods: {
    handlePost(file) {
      const fileType = file.file.type.toLowerCase();
      if (
        fileType.indexOf("png") <= 0 &&
        fileType.indexOf("jpg") <= 0 &&
        fileType.indexOf("doc") <= 0 &&
        fileType.indexOf("pdf") <= 0 &&
        fileType.indexOf("jpeg") <= 0 &&
        fileType.indexOf("mp4") <= 0 &&
        fileType.indexOf("mp3") <= 0
      ) {
        this.$message({
          showClose: true,
          message: "只能上传.png, .jpg, .JPG, .doc, .pdf, .mp4,mp3文件！",
          type: "error"
        });
        this.fileList = this.fileList;
        return false;
      }
      this.imgShow = true;
      this.buttonShow = true;
      axios.get("/qiniu/upload-token").then(res => {
        let data = new FormData();
        let nameDate = new Date().getTime();
        let key = nameDate;
        data.append("name", nameDate);
        data.append("key", key);
        data.append("token", res.data.uploadToken);
        data.append("file", file.file);
        axios
          .post("http://upload.qiniu.com", data, { withCredentials: false })
          .then(res => {
            this.imgShow = false;
            this.buttonShow = false;
            this.demo.code = this.fileData.type;
            this.demo.keyValue = key;
            this.fileList.push({
              name: file.file.name,
              status: "success",
              uid: key,
              type: file.file.type,
              url: "http://qiniu.zhonglongedu.com/" + key
            });
          });
      });
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    Rest() {
      if (this.demo.lessonCount == "") {
        this.$message({
          showClose: true,
          message: "请选择添加课时！",
          type: "error"
        });
        return false;
      }
      let attachments = [];
      this.fileList.map((item, index) => {
        let result = item.type.toLowerCase();
        if (result.indexOf("image") >= 0) {
          result = "IMAGE";
        } else if (result.indexOf("video") >= 0) {
          result = "VIDEO";
        } else if (result.indexOf("audio") >= 0) {
          result = "AUDIO";
        } else {
          result = "DOC";
        }
        attachments.push({
          contentType: {
            code: result
          },
          url: item.url,
          title: item.name
        });
      });
      let courseWareData = {
        attachments: attachments,
        courseOid: this.$route.query.oid,
        lesson: {
          code: this.demo.lessonCount
        }
      };
      api.courseWareAdd(courseWareData).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "添加成功！",
          type: "success"
        });
        this.demo.name = "";
        this.demo.lessonCount = "";
        this.fileList = [];
      });
    },
    sureImport() {
      if (this.demo.lessonCount == "") {
        this.$message({
          showClose: true,
          message: "请选择添加课时！",
          type: "error"
        });
        return false;
      }
      let attachments = [];
      this.fileList.map((item, index) => {
        let result = item.type.toLowerCase();
        if (result.indexOf("image") >= 0) {
          result = "IMAGE";
        } else if (result.indexOf("video") >= 0) {
          result = "VIDEO";
        } else if (result.indexOf("audio") >= 0) {
          result = "AUDIO";
        } else {
          result = "DOC";
        }
        attachments.push({
          contentType: {
            code: result
          },
          url: item.url,
          title: item.name
        });
      });
      let courseWareData = {
        attachments: attachments,
        courseOid: this.$route.query.oid,
        lesson: {
          code: this.demo.lessonCount
        }
      };
      api.courseWareAdd(courseWareData).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "添加成功！",
          type: "success"
        });
        this.$router.push("/upload");
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
